<template>
	<view>
		<view class="header-tab flex justify-between"
			style="padding: 40rpx 140rpx;background-color: #fff;border-bottom: 1px solid #E5E5E5;">
			<view class="title" v-for="(item,index) in tab" :key="index" :class="{active:checkId == item.value}"
				@tap="changeTab(item.value)">{{item.label}}</view>
		</view>
		<block v-if="checkId == 1">
			<view class="community-box" v-for="(item,index) in list" :key='index' style="margin-bottom: 20rpx;">
				<view style="padding: 30rpx 0;border-bottom: 1px solid #F9F9F9;color: #262626;font-size: 28rpx;">
					{{item.createtime_text}}</view>
				<view style="display: flex;align-items: center;padding-top: 30rpx;" @tap="toUser(item.id)">
					<image :src="item.avatar" mode="" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
					<view style="padding-left: 20rpx;" >
						<view>
							<text style="color: #262626;font-size: 28rpx;">{{item.realname}}</text>
							<text style="color: #A7A7A7;font-size: 22rpx;padding-left: 26rpx;">{{item.school}}</text>
						</view>
						<view style="display: flex;padding-top: 10rpx;">
							<view class="label">{{item.label}}</view>
						</view>
					</view>
				</view>
				<view class="remarks">{{item.desc}}</view>
				<view class="condition" v-if="item.gender_require == 0">男女不限 拼{{item.group_person}}人</view>
				<view class="condition" v-if="item.gender_require == 1">限男生 拼{{item.group_person}}人</view>
				<view class="condition" v-if="item.gender_require == 2">限女生 拼{{item.group_person}}人</view>
				<block v-if="item.is_booking == 1">
					<view class="building" >
						<view class="flex align-center" style="padding: 20rpx 0;border-bottom: 1px solid #E5E5E5;" @tap="jump({url:'/pages/apartmentDetail/apartmentDetail?id='+item.apartment_id})">
							<image src="../../static/index/das-icon.png" style="width: 32rpx;height: 32rpx;"></image>
							<view style="flex: 1;color: #202020;font-size: 28rpx;padding-left: 18rpx;">
								{{item.apartment_title}}</view>
							<image src="../../static/index/zu210-2x.png" style="width: 24rpx;height: 24rpx;"></image>
						</view>
						<view class="flex" style="padding: 26rpx 0;" @tap="jump({url:'/pages/roomDetail/roomDetail?id='+item.room.id})">
							<image :src="item.room.thumb" style="width: 144rpx;height: 144rpx;border-radius: 8px;">
							</image>
							<view style="padding-left: 20rpx;">
								<view class="text-one" style="color: #202020;font-size: 28rpx;width: 400rpx;">
									{{item.room.title}}</view>
								<view style="color: #ABABAB;font-size: 24rpx;padding: 10rpx 0 20rpx 0;">{{item.room.size}}㎡
									| {{item.room.toilet}} |
									{{item.room.bed}}
								</view>
								<view class="flex align-center">
									<text class="font-20 fw5" style="color: #C40E0E;">{{item.room.currency}}</text>
									<text class="font-28 fw5"
										style="color: #C40E0E;margin-left: 6rpx;margin-right: 6rpx;">{{item.room.price}}</text>
									<text class="font-20 fw4 cl-88">/周</text>
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view style="padding: 0 20rpx;background: #F9F9F9;border-radius: 8px;">
						<view class="flex align-center" style="padding: 20rpx 0;border-bottom: 1px solid #EFEFEF;"
							v-for="(apartment,apartmentIndex) in item.want_apartment" :key="apartmentIndex" :style="item.want_apartment.length == apartmentIndex+1 ? 'border: none;' : ''">
							<view class="flex" style="flex: 1;" @tap="jump({url:'/pages/apartmentDetail/apartmentDetail?id='+apartment.id})">
								<image :src="apartment.thumb" style="width: 166rpx;height: 106rpx;border-radius: 4px;">
								</image>
								<view style="padding-left: 20rpx;">
									<view class="text-one"
										style="color: #141414;font-size: 24rpx;font-weight: bold;line-height: 24rpx;width: 340rpx;">
										{{apartment.title}}</view>
									<view class="flex align-center" style="padding: 6rpx 0 15rpx 0;">
										<u-icon name="map" color="#6E6E6E" size="11"></u-icon>
										<text class="text-one"
											style="color: #ABABAB;font-size: 20rpx;width: 340rpx;">{{apartment.address}}</text>
									</view>
									<view class="flex align-end">
										<text class="font-20 fw5" style="color: #C40E0E;">{{apartment.currency}}</text>
										<text class="font-28 fw5"
											style="color: #C40E0E;margin-left: 6rpx;margin-right: 6rpx;">{{apartment.price}}</text>
										<text class="font-20 fw4 cl-88">起 /周</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<view class="flex justify-between align-center py-3"
					style="border-top: 1px solid #F9F9F9;margin-top: 30rpx;">
					<view style="color: #A1A1A1;font-size: 28rpx;"></view>
					<button class="button" open-type="share" :data-obj="item">邀请拼房</button>
				</view>
			</view>
		</block>
		<blcok v-if="checkId == 2">
			<view class="community-box" v-for="(item,index) in canlist" :key='index' style="margin-bottom: 20rpx;">
				<view style="padding: 30rpx 0;border-bottom: 1px solid #F9F9F9;color: #262626;font-size: 28rpx;">
					{{item.createtime_text}}</view>
				<view style="display: flex;align-items: center;padding-top: 30rpx;" @tap="toUser(item.id)">
					<image :src="item.avatar" mode="" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
					<view style="padding-left: 20rpx;">
						<view>
							<text style="color: #262626;font-size: 28rpx;">{{item.realname}}</text>
							<text style="color: #A7A7A7;font-size: 22rpx;padding-left: 26rpx;">{{item.school}}</text>
						</view>
						<view style="display: flex;padding-top: 10rpx;">
							<view class="label">{{item.label}}</view>
						</view>
					</view>
				</view>
				<view class="remarks">{{item.desc}}</view>
				<view class="condition" v-if="item.gender_require == 0">男女不限 拼{{item.group_person}}人</view>
				<view class="condition" v-if="item.gender_require == 1">限男生 拼{{item.group_person}}人</view>
				<view class="condition" v-if="item.gender_require == 2">限女生 拼{{item.group_person}}人</view>
				<block v-if="item.is_booking == 1">
					<view class="building" >
						<view class="flex align-center" style="padding: 20rpx 0;border-bottom: 1px solid #E5E5E5;" @tap="jump({url:'/pages/apartmentDetail/apartmentDetail?id='+item.apartment_id})">
							<image src="../../static/index/das-icon.png" style="width: 32rpx;height: 32rpx;"></image>
							<view style="flex: 1;color: #202020;font-size: 28rpx;padding-left: 18rpx;">
								{{item.apartment_title}}</view>
							<image src="../../static/index/zu210-2x.png" style="width: 24rpx;height: 24rpx;"></image>
						</view>
						<view class="flex" style="padding: 26rpx 0;" @tap="jump({url:'/pages/roomDetail/roomDetail?id='+item.room.id})">
							<image :src="item.room.thumb" style="width: 144rpx;height: 144rpx;border-radius: 8px;">
							</image>
							<view style="padding-left: 20rpx;">
								<view class="text-one" style="color: #202020;font-size: 28rpx;width: 400rpx;">
									{{item.room.title}}</view>
								<view style="color: #ABABAB;font-size: 24rpx;padding: 10rpx 0 20rpx 0;">{{item.room.size}}㎡
									| {{item.room.toilet}} |
									{{item.room.bed}}
								</view>
								<view class="flex align-center">
									<text class="font-20 fw5" style="color: #C40E0E;">{{item.room.currency}}</text>
									<text class="font-28 fw5"
										style="color: #C40E0E;margin-left: 6rpx;margin-right: 6rpx;">{{item.room.price}}</text>
									<text class="font-20 fw4 cl-88">起 /周</text>
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view style="padding: 0 20rpx;background: #F9F9F9;border-radius: 8px;" >
						<view class="flex align-center" style="padding: 20rpx 0;border-bottom: 1px solid #EFEFEF;"
							v-for="(apartment,apartmentIndex) in item.want_apartment" :key="apartmentIndex" :style="item.want_apartment.length == apartmentIndex+1 ? 'border: none;' : ''">
							<view class="flex" style="flex: 1;" @tap="jump({url:'/pages/apartmentDetail/apartmentDetail?id='+apartment.id})">
								<image :src="apartment.thumb" style="width: 166rpx;height: 106rpx;border-radius: 4px;">
								</image>
								<view style="padding-left: 20rpx;">
									<view class="text-one"
										style="color: #141414;font-size: 24rpx;font-weight: bold;line-height: 24rpx;width: 340rpx;">
										{{apartment.title}}</view>
									<view class="flex align-center" style="padding: 6rpx 0 15rpx 0;">
										<u-icon name="map" color="#6E6E6E" size="11"></u-icon>
										<text class="text-one"
											style="color: #ABABAB;font-size: 20rpx;width: 340rpx;">{{apartment.address}}</text>
									</view>
									<view class="flex align-end">
										<text class="font-20 fw5" style="color: #C40E0E;">{{apartment.currency}}</text>
										<text class="font-28 fw5"
											style="color: #C40E0E;margin-left: 6rpx;margin-right: 6rpx;">{{apartment.price}}</text>
										<text class="font-20 fw4 cl-88">起 /周</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<view class="flex justify-between align-center py-3"
					style="border-top: 1px solid #F9F9F9;margin-top: 30rpx;">
					<view style="color: #A1A1A1;font-size: 28rpx;"></view>
					<button class="button" open-type="share" :data-obj="item">邀请拼房</button>
				</view>
			</view>
			
		</blcok>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				tab: [{
					label: '发起拼房',
					value: 1
				}, {
					label: '参与拼房',
					value: 2
				}],
				checkId: 1,
				canlist:[],
				page:1,
				total:0,
			}
		},
		onReachBottom() {
			if(this.checkId == 1){
				if(this.list.length >= this.total){
					return
				}
				this.page++
				this.getList()
			}else{
				if(this.canlist.length >= this.total){
					return
				}
				this.page++
				this.getJoinList()
			}
			
			
		},
		onShareAppMessage(res) {
				console.log(res.target.dataset.obj.id)
				let that = this;
				let pathUrl = '/pages/index/community?id='+res.target.dataset.obj.id
				if (res.from === 'button') {
					return {
						title: res.target.dataset.obj.want_apartment_title,
						path: pathUrl
					};
				}
				
			},
		onLoad() {
			this.getList()
		},
		methods: {
			//用户详情
			toUser(id){
				uni.navigateTo({
					url:`/pages/index/communityUser?id=${id}`
				})
			},
			changeTab(index) {
				this.checkId = index
				this.page = 1
				if(this.checkId == 1){
					this.getList()
				}else{
					this.getJoinList()
					
				}
			},
			getList() {
				this.$H.post(this.$api.get_mine_list, {
					page:this.page,
					pagesize:10
				}, {
					token: true
				}).then(res => {
					console.log(res)
					if(this.page == 1){
						this.list = res.data.list
					}else{
						this.list = [...this.list,...res.data.list]
					}
					this.total = res.data.total
				})
			},
			getJoinList(){
				
				this.$H.post(this.$api.get_join_list, {
					page:this.page,
					pagesize:10
				}, {
					token: true
				}).then(res => {
					console.log(res)
					if(this.page == 1){
						this.canlist = res.data.list
					}else{
						this.canlist = [...this.canlist,...res.data.list]
					}
					this.total = res.data.total
					
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F3F3F3;
		
	}
	button::after{
	 	border: none;
	}
	button{
		position: relative;
		display: block;
		margin-left: 500rpx;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		// font-size: 18px;
		text-align: center;
		text-decoration: none;
		// line-height: 1;
		line-height: 1.35;
		// border-radius: 5px;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000000;
		background-color: #fff;
		// width: 100%;
		// height: 100%;
		}
	.title {
		padding: 0 0 10rpx 0;
		position: relative;
		font-size: 28rpx;
		font-weight: 400;
		color: #484848;

		&.active:before {
			content: '';
			position: absolute;
			bottom: 10rpx;
			left: 4rpx;
			width: 132rpx;
			height: 10rpx;
			font-weight: bold;
			color: #343434;
			background: linear-gradient(90deg, #FFB24B 0%, rgba(255, 178, 75, 0) 100%);
		}
	}

	.community-box {
		padding: 0 30rpx;
		background-color: #fff;

		.label {
			padding: 10rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #E99320;
			background: #FFECD2;
			border-radius: 10px 4px 9px 5px;
		}

		.remarks {
			padding-top: 36rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #262626
		}

		.condition {
			padding: 18rpx 0;
			font-size: 30rpx;
			font-weight: 400;
			color: #A1A1A1;
		}

		.building {
			padding: 0 20rpx;
			background: #F9F9F9;
			border-radius: 8px 8px 8px 8px;
		}

		.apartment {
			padding: 0 20rpx;
			background: #F9F9F9;
			border-radius: 8px 8px 8px 8px;
		}

		.apartment-box:last-child {
			border: none;
		}

		.button {
			padding: 20rpx 40rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			background: #FFB24B;
			border-radius: 34px 34px 34px 34px;
		}
	}

	.fixed-button {
		position: fixed;
		bottom: 70rpx;
		left: 70rpx;
		right: 70rpx;

		.button-box {
			width: 100%;
			height: 84rpx;
			background-color: #FFB24B;
			border-radius: 100px 0 100px 100px;

			.size {
				padding-left: 8rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
